<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="img/acer.ico" type="image/x-icon">
    <title>Acer</title>
    <link rel="stylesheet" href="acer.css">
</head>

<body>
    <header id="header">
        <div id="title">
            <ul id="title-list">
                <li class="font-lv">首页</li>
                <li class="font-lv">资讯</li>
                <li id="title-xl">社交平台
                    <img src="img/soc-img.png">
                </li>
            </ul>
            <div id="title-hide">
                <div id="title-hide-kuang">
                    <p class="font-lv" id="title-hide-wb">微博</p>
                    <p class="font-lv">微信</p>
                    <img src="img/title.png">
                </div>
            </div>
            <div id="title-call">
                <p id="call-phone">Acer客户服务热线：400-700-1000 &nbsp;/ &nbsp; 商用售前热线：400-810-0118</p>
                <span>
                    <img src="img/login-img.png">登录</span>
                <span>
                    <img id="call-xian" src="img/nav-sbg1.jpg">注册</span>
            </div>
        </div>
    </header>
    <!-- 导航栏部分 -->
    <div id="nav">
        <div id="nav-wc">
            <img id="nav-wc-logo" src="img/nav-logo.png">
            <div id="nav-count">
                <div>
                    <ul id="nav-count-list">
                        <li class="font-lv">宏碁商城
                            <img id="shopping" src="img/nav-mall.png">
                        </li>
                        <li class="font-lv" id="qucp">全部产品
                            <img src="img/nav-pro.png">
                        </li>
                        <li class="font-lv" id="jy">家用
                            <img src="img/nav-btn.png">
                        </li>
                        <li class="font-lv">高端电竞</li>
                        <li class="font-lv" id="sy">商用
                            <img src="img/nav-btn.png">
                        </li>
                        <li class="font-lv">解决方案</li>
                        <li class="font-lv" id="fwzc">服务支持
                            <img src="img/nav-btn.png">
                        </li>
                    </ul>
                </div>
                <div id="nav-count-inp">
                    <div id="nav-count-inp-input">
                        <input type="text" placeholder="Swift 7 Triton 700">
                    </div>
                    <div id="nav-count-inp-zi">
                        <span class="font-lv">轻薄</span>
                        <span id="nav-count-inp-zi-dj" class="font-lv">电竞</span>
                        <span class="font-lv">时尚</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播图部分 -->
    <div id="lunbo">
        <div id="swiper">
            <div id="container" class="ani">

            </div>
            <div id="ctrl">

            </div>
            <div id="left">
                <img src="img/banner-prev1.png">
            </div>
            <div id="right">
                <img src="img/banner-prev2.png">
            </div>
        </div>
        <div id="sanjiao">
            <img src="img/sanjiao.png">
        </div>
    </div>
    <!-- 下面内容部分 -->
    <div class="main-tu">
        <div class="tu">
            <div class="main-tu-left suofang">

            </div>
            <div class="main-tu-right suofang">
                <div class="main-tu-right-top suofang"></div>
                <div class="main-tu-right-bottom suofang"></div>
            </div>
            <img id="sanjiao-tup" src="img/sanjiao.png">
            <div class="lv-fang"></div>
        </div>

    </div>
    <div class="main-tu2">
        <div class="tu">
            <div class="main-tu2-right suofang">
                <div class="main-tu2-right-top suofang"></div>
                <div class="main-tu2-right-bottom suofang"></div>
            </div>
            <div class="main-tu2-left suofang">

            </div>
            <img id="sanjiao-tutop" src="img/sanjiao.png">
            <img id="sanjiao-tubottom" src="img/sanjiao.png">
            <div class="lv-fang"></div>
        </div>

    </div>
    <!-- 底部横幅 -->
    <div id="dbff">
        <p class="font-lv">了解宏碁<img src="img/con-more1.png"></p>
    </div>
    <!-- footer -->
    <footer id="footer">
        <div id="footer-top">
            <table id="footer-top-left">
                <tr>
                    <td>关于宏碁</td>
                    <td>服务支持</td>
                    <td>资源</td>
                    <td>法律声明</td>
                    
                </tr>
                <tr>
                    <td>联系我们 </td>
                    <td>重要信息公告</td>
                    <td>40TH ANNIVERSARY</td>
                    <td>隐私权规范</td>

                </tr>
                <tr>
                    <td>新闻/td>
                    <td>驱动程序和使用手册</td>
                    <td>Next@Acer</td>
                    <td>法律声明</td>
                </tr>
                <tr>
                    <td>招兵买马</td>
                    <td>Acer Care Center</td>
                    <td>如何购买</td>
                </tr>
                <tr>
                    <td>社会责任</td>
                </tr>
            </table>
            <div id="footer-top-right">
                <h4>订阅电子简报</h4>
                <input id="email" type="text" placeholder="用电子邮件登录...">
                <span id="zc">注册</span>
                <p>注册即表明我接受 Acer
                    <a href="">宏碁隐私政策的条款</a>
                </p>
                <img src="img/title.png">
                <span id="guanfang">Acer宏碁官方</span>
            </div>
        </div>
        <hr>
        <div id="footer-bottom">
            <div id="footer-bottom-left">
                <p>© 2017 Acer Inc.</p>
                <p>此网页最好使用IE9 浏览器、谷歌浏览器、苹果浏览器和其他新式浏览器进行浏览。</p>
                <p>沪ICP备09096122号    |<img src="img/guohui.png">
                        沪公网安备 31011202006996号
                        站长统计</p>
            </div>
            <div id="footer-bottom-right">
                <span>
                    分享到：
                    <img src="img/weixin.png">
                    <img src="img/weibo.png">
                    <img src="img/qq.png">
                    <img id="guoqi" src="img/guoqi.jpg">
                </span>
                <select name="" id="guojiaxl">
                    <option value="">China</option>
                    <option value="">Brasil</option>
                    <option value="">Canada</option>
                    <option value="">German</option>
                    <option value="">Spain</option>
                    <option value="">Israel</option>
                    <option value="">Middle East</option>
                    <option value="">South Africa</option>
                    <option value="">Australia</option>
                </select>
            </div>
        </div>
        <div id="flex">
                <div class="flex-div" id="flex-gm">
                    <img src="img/to-cart.png">
                    <p>购买</p>
                </div>
                <div class="flex-div" id="flex-phone">
                    <img src="img/to-tel.png">
                    <p>电话</p>
                </div>
                <div class="flex-div">
                    <img src="img/to-mes.png">
                    <p>留言</p>
                </div>
            </div>
            <div id="flex-1">
                <img src="img/to-acer.png" >
                <img src="img/to-tmall.png" >
                <img src="img/to-jd.png">
        
            </div>
            <div id="flex-2">
                <div>
                    <p>Acer客户服务热线：</p>
                    <h4>400-700-1000</h4>
                    <p>（周一至周日9：00-18：00）</p>
                </div>
                <div>
                    <p>商用售前：</p>
                    <h4>400-810-0118</h4>
                    <p>（周一至周日9：00-18：00）</p>
                </div>
                <div>
                    <p>Acer大客户服务专线：</p>
                    <h4>400-770-2000</h4>
                    <p>（周一至周日9：00-18：00）</p>
                </div>
                <div>
                    <p>掠夺者部落专线：</p>
                    <h4>400-700-3999</h4>
                    <p>（周一至周日9：00-18：00）</p>
                </div>
            </div>
    </footer>

    <!-- 导航栏隐藏部分 -->
    <div id="nav-hide">
        <!-- 全部产品 -->
        <div id="qbcp-hide">
            <div id="qbcp-hide-top">
                <div class="qbcp-hide-4">
                    <h2>
                        <img src="img/geren.png">个人&家用产品</h2>
                    <div class="qbcp-hide-4-waiceng">
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                            <li>威武骑士（游戏本）</li>
                            <li>Aspire系列（主流本）</li>
                            <li>蜂鸟系列（轻薄本）</li>
                            <li>蜂鸟系列（变形触控本）</li>
                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                        </ul>

                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                            <li>威武骑士（游戏本）</li>
                            <li>Aspire系列（主流本）</li>
                            <li>Aspire系列（主流本）</li>
                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>家庭影院系列</li>
                        </ul>

                    </div>
                </div>
                <div class="qbcp-hide-4">
                    <h2>
                        <img src="img/gddj.png">Predator高端电竞</h2>
                    <div class="qbcp-hide-4-waiceng">
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                            <li>威武骑士（游戏本）</li>
                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                        </ul>

                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                            <li>威武骑士（游戏本）</li>

                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>家庭影院系列</li>
                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>鼠标</li>
                        </ul>

                    </div>
                </div>
            </div>
            <div id="qbcp-hide-bottom">
                <div class="qbcp-hide-4">
                    <h2>
                        <img src="img/shangyong.png">商用&企业产品</h2>
                    <div class="qbcp-hide-4-waiceng">
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                            <li>威武骑士（游戏本）</li>
                            <li>Aspire系列（主流本）</li>
                            <li>蜂鸟系列（轻薄本）</li>
                            <li>蜂鸟系列（变形触控本）</li>
                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                        </ul>

                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                            <li>威武骑士（游戏本）</li>
                            <li>Aspire系列（主流本）</li>
                            <li>Aspire系列（主流本）</li>
                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>家庭影院系列</li>
                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>鼠标</li>
                        </ul>
                        <h3>笔记本</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>暗影骑士（游戏本）</li>
                            <li>威武骑士（游戏本）</li>
                            <li>Aspire系列（主流本）</li>
                            <li>蜂鸟系列（轻薄本）</li>
                            <li>蜂鸟系列（变形触控本）</li>
                        </ul>

                    </div>
                </div>
                <div class="qbcp-hide-4">
                    <h2>
                        <img src="img/fangan.png">方案类产品</h2>
                    <div class="qbcp-hide-4-waiceng">
                        <h3>虚拟化方案</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>桌面云虚拟化（VD1）</li>
                            <li>3D云桌面（SDG）</li>
                            <li>超融合</li>
                            <li>云盘</li>
                        </ul>

                        <h3>教育应用方案</h3>
                        <ul class="qbcp-hide-4-neiceng">
                            <li>AES英语听说训练模拟考试系统</li>
                            <li>人工智能教育解决方案</li>
                            <li>智慧教室</li>
                        </ul>

                    </div>
                </div>
            </div>

        </div>
        <!-- 家用 -->
        <div id="jy-jy" class="jy-hide">
            <ul class="yincangxiala-yiji">
                <li class="yincangxiala-yiji-li font-lv">笔记本
                    <img src="img/nav-fbg1.png">
                    <ul class="yincangxiala-erji">
                        <li class="font-lv">暗影骑士（游戏本）
                        </li>
                        <li class="font-lv">威武骑士（游戏本）
                        </li>
                        <li class="font-lv">Aspire系列（主流本）
                        </li>
                        <li class="font-lv">蜂鸟系列（轻薄本）
                        </li>
                        <li class="font-lv">蜂鸟系列（变形触控本）
                        </li>
                    </ul>
                </li>
                <li class="yincangxiala-yiji-li font-lv">台式机
                    <img src="img/nav-fbg1.png">
                    <ul class="yincangxiala-erji">
                        <li class="font-lv">暗影骑士（游戏本）
                        </li>
                        <li class="font-lv">威武骑士（游戏本）
                        </li>
                        <li class="font-lv">Aspire系列（主流本）
                        </li>
                        <li class="font-lv">Aspire系列（主流本）
                        </li>
                    </ul>
                </li>
                <li class="yincangxiala-yiji-li font-lv">显示器
                    <img src="img/nav-fbg1.png">
                    <ul class="yincangxiala-erji">
                        <li class="font-lv">暗影骑士（游戏本）
                        </li>
                        <li class="font-lv">威武骑士（游戏本）
                        </li>
                        <li class="font-lv">Aspire系列（主流本）
                        </li>
                    </ul>
                </li>
                <li class="yincangxiala-yiji-li font-lv">投影机
                    <img src="img/nav-fbg1.png">
                    <ul class="yincangxiala-erji">
                        <li class="font-lv">暗影骑士（游戏本）
                        </li>
                        <li class="font-lv">威武骑士（游戏本）
                        </li>
                        <li class="font-lv">Aspire系列（主流本）
                        </li>
                        <li class="font-lv">蜂鸟系列（轻薄本）
                        </li>

                    </ul>
                </li>
            </ul>
        </div>

        <!-- 服务支持 -->
        <div class="fwzc-hide">
            <ul class="yincangxiala-yiji">
                <li class="yincangxiala-yiji-li font-lv">笔记本
                </li>
                <li class="yincangxiala-yiji-li font-lv">笔记本

                </li>
                <li class="yincangxiala-yiji-li font-lv">笔记本

                </li>
                <li class="yincangxiala-yiji-li font-lv">笔记本

                </li>

            </ul>
        </div>
    </div>













    <script src="jquery.js"></script>
    <script src="acer.js"></script>


</body>

</html>